<template>
  <cloudPage :isLoading="pageLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;font-wei"
        >
          {{ $t("otc.merchant.title") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>

    <view class="adListContainer" v-if="!pageLoading">
      <!-- 在线购买 -->
      <view class="buy-online">
        <view class="navbar">
          <view
            class="nav-item"
            :class="{ current: isBuySell === 1 }"
            @click="sideTabClick(1)"
            >{{ $t("otc.merchant.buy") }}</view
          >
          <view
            class="nav-item"
            :class="{ current: isBuySell === 2 }"
            @click="sideTabClick(2)"
            >{{ $t("otc.merchant.sell") }}</view
          >
        </view>
        <!-- 买单 -->
        <block v-if="isBuySell == 1">
          <view v-if="exchangeMyBuy.data.length != 0">
            <view
              class="buy-list"
              v-for="(item, index) in exchangeMyBuy.data"
              :key="index"
            >
              <view class="row">
                <view class="name">
                  <view class="profile">
                    {{ item.user | sub }}
                  </view>
                  {{ item.user | name }}
                </view>
              </view>
              <view class="row">
                <view class="nomarl">
                  {{ $t("otc.index.count") }} {{ parseFloat(item.surplus) }}
                  {{ item.coin.coin }}
                </view>
                <view class="nomarl">{{ $t("otc.index.unit_price") }}</view>
              </view>
              <view class="row">
                <view class="nomarl">
                  {{
                    $t("otc.index.limit_count", {
                      min: item.min,
                      max: item.max
                    })
                  }}
                </view>
                <view class="price">￥{{ parseFloat(item.price) }}</view>
              </view>
              <view class="row opt">
                <view class="pay">
                  <image
                    v-for="(t, index) in item.bank_list"
                    :key="index"
                    :src="t | formatIconUrl"
                    class="ml-10"
                  ></image>
                </view>
                <view style="display:flex;"
                  ><button
                    v-if="item.status != 9 && item.status != 2"
                    class="btn"
                    style="background:#e64340"
                    @click="cancel(item.id)"
                  >
                    {{ $t("common.operate.cancel") }}
                  </button>
                  <button
                    v-if="item.status == 9"
                    class="btn"
                    style="background:#aaa"
                  >
                    {{ $t("common.status.cancelled") }}
                  </button></view
                >
              </view>
            </view>
            <!-- 加载 -->
            <graceLoading
              :loadingType="
                loading['otc.exchange_my_buy']
                  ? 1
                  : exchangeMyBuy.has_next_page
                  ? 0
                  : 2
              "
            />
          </view>
          <view class="none" v-else>
            <image src="/static/otc/none.png" />
            <view>暂无记录</view>
          </view>
        </block>
        <!-- 卖单 -->
        <block v-else>
          <view v-if="exchangeMySell.data.length != 0">
            <view
              class="buy-list"
              v-for="(item, index) in exchangeMySell.data"
              :key="index"
            >
              <view class="row">
                <view class="name">
                  <view class="profile">
                    {{ item.user | sub }}
                  </view>
                  {{ item.user | name }}
                </view>
              </view>
              <view class="row">
                <view class="nomarl">
                  {{ $t("otc.index.count") }} {{ parseFloat(item.surplus) }}
                  {{ item.coin.coin }}
                </view>
                <view class="nomarl">{{ $t("otc.index.unit_price") }}</view>
              </view>
              <view class="row">
                <view class="nomarl">
                  {{
                    $t("otc.index.limit_count", {
                      min: item.min,
                      max: item.max
                    })
                  }}
                </view>
                <view class="price">￥{{ parseFloat(item.price) }}</view>
              </view>
              <view class="row opt">
                <view class="pay">
                  <image
                    v-for="(t, index) in item.bank_list"
                    :key="index"
                    :src="t | formatIconUrl"
                    class="ml-10"
                  ></image>
                </view>
                <view style="display:flex;"
                  ><button
                    v-if="item.status != 9 && item.status != 2"
                    class="btn"
                    style="background:#e64340"
                    @click="cancel(item.id)"
                  >
                    {{$t('common.operate.cancel')}}
                  </button>
                  <button
                    v-if="item.status == 9"
                    class="btn"
                    style="background:#aaa"
                  >
                    {{$t('common.status.cancelled')}}
                  </button>
                </view>
              </view>
            </view>
            <!-- 加载 -->
            <graceLoading
              :loadingType="
                loading['otc.exchange_my_sell']
                  ? 1
                  : exchangeMySell.has_next_page
                  ? 0
                  : 2
              "
            />
          </view>
          <view class="none" v-else>
            <image src="/static/otc/none.png" />
            <view>暂无记录</view>
          </view>
        </block>
      </view>
    </view>
    <graceDialog :title="$t('otc.merchant.title_cancel')" :show="showCancel" :isCloseBtn="false">
      <view slot="btns" class="grace-space-between">
        <text class="grace-dialog-buttons" @tap.stop="closeDialog">{{$t('common.operate.cancel')}}</text>
        <text class="grace-dialog-buttons grace-blue" @tap.stop="confirm">
          {{$t('common.operate.sure')}}
        </text>
      </view>
    </graceDialog>
  </cloudPage>
</template>

<script>
// status
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      pageLoading: true,
      isBuySell: 1, // 1是卖，2是买
      cancelId: undefined,
      showCancel: false
    };
  },
  filters: {
    sub(v) {
      let name = v.user_info
        ? v.user_info.nick_name
          ? v.user_info.nick_name
          : v.username
        : v.username;
      if (name) {
        return name.substring(0, 1);
      }
      return "";
    },
    name(v) {
      let name = v.user_info
        ? v.user_info.nick_name
          ? v.user_info.nick_name
          : v.username
        : v.username;
      return name;
    },
    formatIconUrl(v) {
      return `/static/${v}.png`;
    }
  },
  async onLoad() {
    await this.loadExchangeMyBuy();
    await this.loadExchangeMySell();
    this.pageLoading = false;
    console.log(this.exchangeMyBuy, this.exchangeMySell);
  },
  computed: {
    ...mapGetters("otc", ["exchangeMyBuy", "exchangeMySell"])
  },
  methods: {
    ...mapActions("otc", [
      "loadExchangeMyBuy",
      "loadExchangeMySell",
      "exchangeCancel"
    ]),
    // 点击买或卖
    sideTabClick(index) {
      this.isBuySell = index;
    },
    // 取消按钮
    cancel(id) {
      this.cancelId = id;
      this.showCancel = true;
    },
    // 关闭对话框
    closeDialog() {
      this.showCancel = false;
    },
    // 确认取消
    async confirm() {
      console.log(this.cancelId);
      this.showCancel = false;
      await this.exchangeCancel({
        id: this.cancelId
      });
      if (this.isBuySell == 1) {
        this.loadExchangeMyBuy();
      } else if (this.isBuySell == 2) {
        this.loadExchangeMySell();
      }
      this.makeToast({
        title: this.$t("common.tips.success"),
        icon: "none",
        duration: 1500
      });
    }
  },
  onReachBottom: function() {
    // 判断是买是卖
    if (this.isBuySell == 1) {
      // 1是卖
      // 判断是否有下一页
      if (this.exchangeMySell.has_next_page) {
        this.loadExchangeMySell({
          page: exchangeMySell.current_page + 1
        });
      }
    } else if (this.isBuySell == 2) {
      // 2是买
      if (this.exchangeMyBuy.has_next_page) {
        this.loadExchangeMyBuy({
          page: exchangeMyBuy.current_page + 1
        });
      }
    }
  }
};
</script>

<style>
page {
  background: #fff;
}
</style>

<style scoped>
.adListContainer {
  width: 100%;
  height: 100%;
  margin-top: 20rpx;
}
.buy-online {
  width: 100%;
}
.title {
  width: 100%;
  height: 82rpx;
  font-weight: 550;
  font-size: 32rpx;
  line-height: 82rpx;
  background-color: #fff;
  padding-left: 20rpx;
  border-bottom: 1px solid #f7f7f7;
}
.buy-list {
  padding: 20rpx 32rpx;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.row .name .profile {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 50%;
  text-align: center;
  background: #0952c3;
  color: #fff;
  font-weight: 100;
  font-weight: bold;
  font-size: 30rpx;
  margin-right: 10rpx;
}
.row .name {
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.mt-50 {
  margin-top: 50rpx;
}
.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx 0;
  align-items: flex-end;
  box-sizing: border-box;
}
.row .nomarl {
  font-size: 25rpx;
  color: #8b9faa;
}
.row .price {
  color: #0952c3;
  font-size: 40rpx;
}
.row .pay image {
  width: 25px;
  height: 25px;
}
.row .btn {
  border: 0;
  background: #0952c3;
  color: #fff;
  font-size: 25rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 50rpx;
  margin-left: 5rpx;
}
.row .btn.btn1 {
  background: #475f78;
}
.navbar {
  display: flex;
  height: 40px;
  background: #fff;
  position: relative;
  padding-bottom: 30rpx;
  padding-left: 20rpx;
}
.navbar .nav-item {
  height: 100%;
  font-size: 30rpx;
  color: #8b9faa;
  margin-right: 15px;
  display: flex;
  align-items: flex-end;
}
.navbar .current {
  color: #14191f;
  font-size: 40rpx;
  font-weight: bold;
}
.none {
  width: 100%;
  height: 100%;
  text-align: center;
}
.none image {
  width: 374rpx;
  height: 308rpx;
  margin-top: 100rpx;
  margin-bottom: 50rpx;
}
.none view {
  color: #aeaeae;
  font-size: 32rpx;
}
</style>
